p5.js 画像の入出力と加工
https://gyazo.com/91b957a2021afec23dc929b82300770a
画像の保存 (sキーを押すと保存)
code:save_image.js
function setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(220);
fill(100, 200, 0);
rect(100,100,200,200);
}
function keyPressed() {
if (key == 's'){
saveCanvas('homework_7', 'png'); // ファイル名, ファイル形式(png or jpg)
//gd.timestamp()
}
}
セキュリティの都合から、ブラウザによって画像のダウンロードがブロックされる場合がある
解決方法の一例
ブラウザのブロックを解除する
画像の読み込み
code: load_image.js
let img;
function preload() {
}
function setup() {
createCanvas(400,400);
background(200);
image(img, 0, 0);
}
セキュリティの都合から、ホスト先によって画像の読み込みがブロックされることがある
Flickrの画像 "Creative Commons" OK
自分のWEBの画像 NG
解決方法の一例
Flickrに画像をupする
p5.jsにログインして、ファイルをアップロードする
ローカルでp5.jsを動かす
画像の色合いを変える
code: tint.js
let img;
function preload() {
}
function setup() {
createCanvas(500,332);
tint(100, 255, 255);
image(img, 0, 0);
}
画像にフィルターをかける
code: filter.js
let img;
function preload() {
}
function setup() {
createCanvas(500,332);
background(200);
image(img, 0, 0);
}
function keyPressed() {
if (key === '1') {
filter(THRESHOLD);
}
else if (key === '2') {
filter(GRAY);
}
else if (key === '3') {
filter(OPAQUE);
}
else if (key === '4') {
filter(INVERT);
}
else if (key === '5') {
filter(POSTERIZE, 10);
}
else if (key === '6') {
filter(DILATE);
}
else if (key === '7') {
filter(BLUR, 10);
}
else {
image(img, 0, 0);
}
}
読み込んだ画像を点描する
code:point.js
let img;
function preload() {
}
function setup() {
createCanvas(500, 332);
noStroke();
background(255);
image(img, 0, 0);
}
function draw() {
let x = random(0, width);
let y = random(0, height);
let r = random(1, 15);
fill(pix, 128);
ellipse(x, y, r, r);
}
参考文献
p5.js Reference & Examples
https://gyazo.com/a52cd788e66292a84a3bcac02356d0cd
;){kind=link}